<template>
	<view :id="success ? 'appbw' : 'app'">

		<uni-transition :mode-class="['fade']" :show="!success">
			<!-- 头部背景 -->
			<view class="topBg detail plr30">
				<!-- 内容 -->
				<view class="wrap df aic mt50">
					<!-- 图片 -->
					<view class="img wh45">
						<image src="/static/clock.png" mode="aspectFit"></image>
					</view>
					<view class="state ml20 f30">{{wrap.status_text}}</view>
				</view>
			</view>

			<!-- 订单详情 -->
			<view class="address area mt30 mlr30 pt30">
				<!-- 内容 -->
				<view class="rows plr30">
					<!-- 地址 -->
					<view class="site">
						<!-- 用户 -->
						<view class="user df aic c333 f30">
							<view class="name w150 thd">{{wrap.user_addressData.name}}</view>
							<view class="phone">{{wrap.user_addressData.mobile}}</view>
						</view>
						<!-- 地址 -->
						<view class="info mt20 thd c999 f28">
							{{wrap.user_addressData.area}}{{wrap.user_addressData.detail}}
						</view>
					</view>
				</view>
				<!-- 条 -->
				<view class="bar mt30">
					<image src="/static/payBar.png" mode="widthFix"></image>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="proDesc area mt30 mlr30 plr25 bw">
				<!-- 商家 -->
				<view class="rows ptb20 f28 bdb1se">
					<view class="col df f1">
						<!-- 商家头像 -->
						<view class="proImg wh40">
							<image :src="wrap.sellData.shop_logo" mode="aspectFill"></image>
						</view>
						<!-- 商家名称 -->
						<view class="txt ml10 c333">{{wrap.sellData.shop_name}}</view>
					</view>
				</view>

				<!-- 订单信息 -->
				<view class="proInfo df ais ptb35">
					<!-- 商品图片 -->
					<view class="proImg img180">
						<image :src="wrap.goodsData.images[0]" mode="aspectFill" lazy-load></image>
					</view>
					<!-- 商品信息 -->
					<view class="proInfo df dfc dfsb oh ml20 f1">
						<!-- 商品名称 -->
						<view class="title t2hd c333 f32">{{wrap.goodsData.name}}</view>

						<view class="rows f28">
							<view class="num">×{{wrap.num}}</view>
							<!-- 价格 -->
							<view class="price">
								<text class="c999">小计：</text>
								<text class="cFF9646">￥{{wrap.total}}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 总价 -->
				<view class="letter ptb20 tar f28 bdt1sE">
					<text class="c999">总价：</text>
					<text class="cff9646">￥{{wrap.total}}</text>
				</view>
			</view>

			<!-- 订单切换 -->
			<view class="orderDesc area mt30 mlr30 ptb30 plr30 c666 f28">
				<!-- 订单编号 -->
				<view class="rows">
					<view class="col w150">订单编号：</view>
					<view class="col f1">{{wrap.number}}</view>
				</view>

				<!-- 下单时间 -->
				<view class="rows">
					<view class="col w150">下单时间：</view>
					<view class="col f1">{{wrap.createtime}}</view>
				</view>

				<!-- 订单备注 -->
				<view class="rows">
					<view class="col w150">订单备注：</view>
					<view class="col f1">{{wrap.remark ? wrap.remark : ''}}</view>
				</view>

				<!-- 取消时间 -->
				<view class="rows" v-if="wrap.canceltime">
					<view class="col">取消时间：</view>
					<view class="col f1">{{wrap.canceltime}}</view>
				</view>
			</view>

			<!-- 订单其他详情 -->
			<view class="orderDesc area mt30 mlr30 ptb30 plr30 c333 f28" v-if="wrap.paytime">
				<!-- 付款时间 -->
				<view class="rows">
					<view class="col w150">付款时间：</view>
					<view class="col f1">{{wrap.paytime}}</view>
				</view>

				<!-- 发货时间 -->
				<view class="rows" v-if="wrap.express_time">
					<view class="col">发货时间：</view>
					<view class="col f1">{{wrap.express_time}}</view>
				</view>

				<!-- 快递公司 -->
				<view class="rows" v-if="wrap.express_name">
					<view class="col">快递公司：</view>
					<view class="col f1">{{wrap.express_name}}</view>
				</view>

				<!-- 快递单号 -->
				<view class="rows" v-if="wrap.express_number">
					<view class="col">快递单号：</view>
					<view class="col f1">{{wrap.express_number}}</view>
				</view>

				<!-- 取消时间 -->
				<view class="rows" v-if="wrap.canceltime">
					<view class="col">取消时间：</view>
					<view class="col f1">{{wrap.canceltime}}</view>
				</view>

				<!-- 退款时间 -->
				<view class="rows" v-if="wrap.refundtotime && (wrap.status == 5 || wrap.status == 6)">
					<view class="col">退款时间：</view>
					<view class="col f1">{{wrap.refundtotime}}</view>
				</view>

				<!-- 退款理由 -->
				<view class="rows" v-if="wrap.refundtotime && (wrap.status == 5 || wrap.status == 6)">
					<view class="col">退款理由：</view>
					<view class="col f1">{{wrap.refund_reason}}</view>
				</view>

				<!-- 商家处理结果 -->
				<view class="rows" v-if="wrap.shop_refund_status == 4">
					<view class="col">商家处理结果：</view>
					<view class="col f1">拒绝退款</view>
				</view>

				<!-- 商家处理结果 -->
				<view class="rows" v-if="wrap.shop_refund_status == 3">
					<view class="col">商家处理结果：</view>
					<view class="col f1">同意退款</view>
				</view>

				<!-- 商家拒绝原因 -->
				<view class="rows" v-if="wrap.shop_refund_status != 1 && wrap.shop_refund_reason">
					<view class="col">商家拒绝原因：</view>
					<view class="col f1">{{wrap.shop_refund_reason}}</view>
				</view>

				<!-- 商家处理时间 -->
				<view class="rows" v-if="wrap.refundtime">
					<view class="col">商家处理时间：</view>
					<view class="col f1">{{wrap.refundtime}}</view>
				</view>

				<!-- 平台处理结果 -->
				<view class="rows" v-if="wrap.ping_refund_reason">
					<view class="col">平台处理结果：</view>
					<view class="col f1">{{wrap.ping_refund_reason}}</view>
				</view>

				<!-- 平台处理通过 -->
				<view class="rows" v-if="wrap.ping_refund_status == 3">
					<view class="col">平台处理结果：</view>
					<view class="col f1">同意退款</view>
				</view>

				<!-- 平台处理时间 -->
				<view class="rows" v-if="wrap.refund2time">
					<view class="col">平台处理时间：</view>
					<view class="col f1">{{wrap.refund2time}}</view>
				</view>

				<!-- 退款金额 -->
				<view class="rows" v-if="wrap.status == 6">
					<view class="col">退款金额：</view>
					<view class="col f1">￥{{wrap.payment}}</view>
				</view>

				<!-- 退款完成时间 -->
				<view class="rows" v-if="wrap.shop_refund_status == 3 || wrap.ping_refund_status == 3">
					<view class="col">退款完成时间：</view>
					<view class="col f1">
						<text v-if="wrap.ping_refund_status == 3">{{wrap.refund2time}}</text>
						<text v-else-if="wrap.shop_refund_status == 3">{{wrap.refundtime}}</text>
					</view>
				</view>

			</view>

			<!-- 填充 -->
			<view class="fill"></view>

			<!-- 底部 -->
			<view class="footer df dfr ptb20 plr30 bw" v-if="wrap.status == 1">
				<view class="btn cancel w200" @click="cancel">取消订单</view>
				<view class="btn prmary ml20 w200" @click="pay">确认支付</view>
			</view>

			<!-- 底部 -->
			<view class="footer df dfr ptb20 plr30 bw" v-if="wrap.status == 2">
				<view class="btn prmary ml20 w200" @click="$refs.backAlt.open()">申请退款</view>
			</view>

			<!-- 底部 -->
			<view class="footer df dfr ptb20 plr30 bw" v-if="wrap.status == 3">
				<view class="btn prmary ml20 w200" @click="getPro">确认收货</view>
			</view>

			<!-- 底部 -->
			<view class="footer df dfr ptb20 plr30 bw" v-if="wrap.status == 5">
				<view class="btn prmary ml20 w250" @click="reBack">取消退款申请</view>
			</view>
		</uni-transition>

		<uni-transition class="pf t0 w100p" :modeClass="['fade']" :show="success">
			<!-- 结果 -->
			<view class="result df dfc aic mt10p">
				<!-- 图 -->
				<view class="img wh160">
					<image src="/static/success.png" mode="aspectFit"></image>
				</view>

				<view class="txt mt60 c333 f40 fwb">恭喜您，支付成功</view>

				<view class="mt30 c999 f28">　</view>

				<!-- 操作框 -->
				<view class="fnArea df aic mt70">
					<navigator :url="'/pages/my/order/detail?id=' + id" open-type="redirect" class="btn prmary w250">
						查看订单</navigator>
				</view>
			</view>
		</uni-transition>

		<uni-popup ref="backAlt" type="center">
			<view class="popMid pt30">
				<!-- 标题 -->
				<view class="title c000 f30">填写退款理由</view>
				<!-- 编辑 -->
				<label class="edit rows w70p mauto mt50 pb10 bdb1se">
					<view class="img wh30">
						<image src="/static/1706.png" mode="aspectFit"></image>
					</view>
					<view class="f1">
						<input type="text" v-model="backVal" />
					</view>
				</label>
				<!-- 按钮 -->
				<view class="fnArea rows mt50 lh100 bdt1sE f34">
					<view class="f1 bdr1se c999" @click="$refs.backAlt.close()">取消</view>
					<view class="f1" @click="confirm">确定</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>
<script>
	// 定义全局变量that
	var that;
	export default {
		// 页面变量
		data() {
			return {
				// 内容
				wrap: {},
				// 订单id
				id: '',
				// 退款理由
				backVal: '',
				// 提交成功
				success: false,
			}
		},

		// 页面加载完成后
		onLoad(e) {
			that = this;

			// 订单id
			e.id ? that.id = e.id : '';

			// 订单详情
			that.order_detail();
		},

		// 方法集
		methods: {
			// 取消订单
			cancel() {
				// 弹窗提示
				that.alert({
					value: '确认取消订单？',
					success(rs) {
						// 点击确定
						if (rs.confirm) {
							// 更改订单状态
							that.util.changeOrder({
								data: {
									// 需要操作的id
									id: that.id,
									// 修改状态
									status: 7,
									// 取消时间
									canceltime: Date.parse(new Date()) / 1000,
								},
							}, that)
						}
					},
				});
			},

			// 确认收货
			getPro() {
				// 弹窗提示
				that.alert({
					value: '是否确认收货?',
					success(rs) {
						if (rs.confirm) {
							// 改变订单状态
							that.util.changeOrder({
								data: {
									// 订单id
									id: that.id,
									// 状态
									status: 4,
								},
							}, that)
						};
					},
				});
			},

			// 取消退款申请
			reBack() {
				// 弹窗提示
				that.alert({
					value: '确认取消退款？',
					success(rs) {
						// 判断点击确定
						if (rs.confirm) {
							// 更改订单状态
							that.util.changeOrder({
								data: {
									// 需要操作的id
									id: that.id,
									// 修改状态
									status: 2,
								},
							}, that)
						}
					},
				});
			},

			// 订单详情
			order_detail() {
				// 提交数据
				var data = {
					table: 'goods_order',
					id: that.id,
				};

				// 请求接口 
				that.request({
					url: '',
					// 上传数据
					data: data,
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 赋值内容
							that.wrap = rs.data;

							// 更改标题
							uni.setNavigationBarTitle({
								title: that.wrap.status_text,
							})
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					}
				})
			},

			// 确定
			confirm() {
				// 判断填写原因
				if (!that.backVal) {
					// 弹窗提示
					that.alert('请填写退款理由');
					return;
				}

				// 更改订单状态
				that.util.changeOrder({
					data: {
						// 需要操作的id
						id: that.id,
						// 退款理由
						refund_reason: that.backVal,
						// 修改状态
						status: 5,
					},
					success(rs) {
						// 关闭弹窗
						that.$refs.backAlt.close();

						// 赋值退款理由
						that.refund_reason = that.backVal;

						// 清空内容
						that.backVal = '';
					},
				}, that)
			},

			// 付钱
			pay() {
				// 支付
				that.util.payment({
					url: "/api/goods_order/pay",
					data: {
						id: that.id,
						platform: "wechatMini2"
					},
					// 完成
					complete(rs) {
						// 更改状态
						that.wrap.status = 2;
						that.wrap.status_text = rs.data.status_text;

						// 更改标题
						uni.setNavigationBarTitle({
							title: rs.data.status_text,
						})
					},
				})
			},

		},
	};
</script>
<style>
	/* 上背景 */
	.topBg {
		height: 200rpx;
	}

	/* 商品简息 */
	.address {
		margin-top: -50rpx;
	}

	/* 订单简介 */
	.orderDesc {
		line-height: 70rpx;
	}

	/* 每行第一列 */
	.rows .col:nth-child(1) {
		color: #999;
	}
</style>
